<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>用户登录</title>
    <script src="js/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <link href="element-ui@2.15.14/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="js/vue@2.js"></script>
    <script src="element-ui@2.15.14/lib/index.js"></script>
    <script src="js/util.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            /*background-image: url("img/bg.jpg");*/
        }

        #app {
            border-radius: 4px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 3rem;
            width: fit-content;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        }

        .form-item {
            margin-bottom: 2rem;
        }

        input {
            border: 1px solid #c5c5c5;
            padding: 0.3rem;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="text-align: center;margin-bottom: 2rem;font-size: 25px;font-weight: bold">修改学生信息页面</div>
    <form enctype="multipart/form-data" id="updateForm">
        <input name="username" type="hidden"/>
        <div class="form-item"> 账号：
            <span name="username"></span>
        </div>
        <div class="form-item"> 姓名：<input name="name" type="text"/></div>
        <div class="form-item"> 年龄：<input name="age" type="text"/></div>
        <div class="form-item">
            性别：
            <input name="sex" type="radio" value="man"/>男
            <input name="sex" type="radio" value="woman"/>女
        </div>
        <div class="form-item"> 爱好：
            <input name="hobbies" type="checkbox" value="football"/>足球
            <input name="hobbies" type="checkbox" value="basketball"/>篮球
            <input name="hobbies" type="checkbox" value="shop"/>购物
        </div>
        <div class="form-item"> 上传头像：<input name="photo" type="file"/><br/></div>
        <div class="form-item">
            <input class="btn btn-primary" type="submit" value="修改"/>
            <input class="btn btn-warning" onclick="goBack()" style="margin-left: 2rem" type="button" value="返回"/>
        </div>

    </form>
</div>

<script type="text/javascript">
    const app = new Vue({
        el: "#app",
    })

    function goBack() {
        window.location = "index.html";
    }

    if (!isLogin()) {
        app.$message.error("您没有登录")
        setTimeout(() => {
            location.href = 'login.html'
        }, 500)
    }
    if (!isAdmin() && !isTeacher()) {
        app.$message.error("您无权操作")
        setTimeout(() => {
            location.href = 'index.html'
        }, 500)
    }

    let username = getParameter(location.href, "username")
    getStudentInfo(username)

    $("#updateForm").submit(function (event) {
        event.preventDefault();
        let formData = new FormData(this);
        $.ajax(
            {
                type: "post",
                url: "student?action=doModify",
                processData: false,//不设置处理数据，因为使用了FormData对象
                contentType: false,//不设置内容类型，表单上设置了
                data: formData,
                async: true,
                success: function (data) {
                    data = JSON.parse(data);
                    if (data.code == 1) {
                        app.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        setTimeout(() => {
                            location.href = "stuList.html"
                        }, 500)
                    } else {
                        app.$message.error(data.msg)
                    }
                }
            }
        )
    })

    function getStudentInfo(username) {
        $.ajax({
                url: "user?action=getUser",
                data: {username: username, role: 'student'},
                type: "get",
                dataType: "json",
                success: function (data) {
                    let userData = data.data.user;
                    $("input[name='username']").val(userData.username);
                    $("span[name='username']").text(userData.username);
                    $("input[name='name']").val(userData.name);
                    $("input[name='age']").val(userData.age);
                    if (userData.sex == "man") {
                        $("input[name='sex'][value='man']").attr("checked", true);
                    } else {
                        $("input[name='sex'][value='woman']").attr("checked", true);
                    }
                    if (userData.hobbies.includes("football")) {
                        $("input[name='hobbies'][value='football']").attr("checked", true);
                    }
                    if (userData.hobbies.includes("basketball")) {
                        $("input[name='hobbies'][value='basketball']").attr("checked", true);
                    }
                    if (userData.hobbies.includes("shop")) {
                        $("input[name='hobbies'][value='shop']").attr("checked", true);
                    }
                }
            }
        )
    }
</script>
</body>
</html>